<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>cate</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo/demo.css">
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery.serializeObject.js"></script>
</head>
<body>
<ul id="tree"></ul>
<div id="ddd" class="easyui-dialog" title='My Dialog' data-options="closed:true,cache: false,modal: true"
     style="width: 400px;height: 200px">
    <form id="ff" method="post" style="padding:20px 20px;">

        <input id="parentId" name="parentId" style="width: 0;height:0;opacity: 0">

        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="text" style="width:100%" data-options="label:'节点名:',required:true">
        </div>
        <div style="text-align:center;padding:5px 0;width:100%">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addChildNode()" style="width:80px">添加子节点</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addRootNode()" style="width:80px">添加根节点</a>
        </div>
    </form>
</div>


<!--<div id="dd" class="easyui-dialog" title='My Dialog' data-options="closed:true,cache: false,modal: true"-->
     <!--style="width: 400px;height: 200px">-->
    <!--<form id="form" method="post" style="width:100%;max-width:300px;padding:30px 20px;">-->
        <!--<div style="margin-bottom:20px">-->
            <!--<input class="easyui-textbox" name="text" style="width:100%" data-options="label:'节点名:',required:true">-->
        <!--</div>-->
        <!--<input id="id" type="text" name="_id" style="">-->
    <!--</form>-->
    <!--<div style="text-align:center;padding:5px 0">-->
        <!--<a href="javascript:void(0)" class="easyui-linkbutton" onclick="change()" style="width:80px">Submit</a>-->
    <!--</div>-->
<!--</div>-->
<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
    <div onclick="removeit()" data-options="iconCls:'icon-remove'">Remove</div>
    <div class="menu-sep"></div>
    <div onclick="expand()">Expand</div>
    <div onclick="collapse()">Collapse</div>
</div>
<script>
	$('#tree').tree({
		url: "http://localhost:3000/cate/list",
		method: 'post',
		animate: true,
		onContextMenu: function (e, node) {
			$('#parentId').val(node._id);
			e.preventDefault();
			$(this).tree('select', node.target);
			$('#mm').menu('show', {
				left: e.pageX,
				top: e.pageY
			});
		},
//		onClick(node){
//			$('#parentId').val(node._id);
//		},
//		onDblClick(node){
//			$('#dd').dialog('open');
//			$('#id').val(node._id);
//		}
		onDblClick: function (node) {
			$(this).tree('beginEdit', node.target);
		},
		onAfterEdit(node){
			var nodeData = $(this).tree('getSelected');
			var id = nodeData._id;
			var text = nodeData.text;
			$.ajax({
				url: "http://localhost:3000/cate/data/" + id,
				method: "post",
				data: {text: text},
				success: function (res) {
					console.log("cheng");
				}
			})
		}
	})
	//添加根元素
	function addRootNode() {
		$('#ff').form('submit', {
			onSubmit: function () {
				var isValid = $(this).form('validate');
				if (isValid) {
					var data = $('#ff').serializeObject();
					delete data.parentId;
					if (!data.parentId) {
						$.ajax({
							url: "http://localhost:3000/cate/data",
							method: 'post',
							data: data,
							success: function (res) {
								$('#ff').form('clear');
								$("#tree").tree('reload');
								$('#ddd').dialog('close');
							}
						})
					}

				}
			}
		});
	}
	//添加子节点
	function addChildNode() {
		$('#ff').form('submit', {
			onSubmit: function () {
				var isValid = $(this).form('validate');
				if (isValid) {
					var data = $('#ff').serializeObject();
					if (data.parentId && data.parentId.length > 0) {
						$.ajax({
							url: "http://localhost:3000/cate/data",
							method: 'post',
							data: data,
							success: function (res) {
								$('#ff').form('clear');
								$("#tree").tree('reload');
								$('#ddd').dialog('close');
							}
						})
					}

				}
			}
		});
	}

	//删除节点
//	function removeNodes() {
//		var nodes = $('#tree').tree('getSelected');
//		var id = nodes._id;
//		$.messager.confirm('Confirm', 'Are you sure you want to delete nodes?', function (r) {
//			if (r) {
//				$.ajax({
//					url: "http://localhost:3000/cate/data/" + id,
//					method: "delete",
//				}).done(res => {
//					$("#tree").tree('reload');
//					slide();
//				})
//			}
//		});
//	}

	//改变节点名称
	//    function change() {
	//
	//	}
	function append() {
		var t = $('#tree');
		var node = t.tree('getSelected');
		$('#ddd').dialog("open");
	}
	function removeit() {
		var nodes = $('#tree').tree('getSelected');
		var id = nodes._id;
		$.messager.confirm('Confirm', 'Are you sure you want to delete nodes?', function (r) {
			if (r) {
				$.ajax({
					url: "http://localhost:3000/cate/data/" + id,
					method: "delete",
				}).done(res => {
//					console.log(res.res);
					$("#tree").tree('reload');
//					$.ajax({
//                        url:"http://localhost:3000/news/remove",
//                        method:"post",
//                        data:{cateIds:res.res}
//                    }).done(data=>{
//						console.log(data);
//					})
					slide();
				})
			}
		});
	}
	//	function collapse() {
	//		var node = $('#tree').tree('getSelected');
	//		$('#tree').tree('collapse', node.target);
	//	}
	//	function expand() {
	//		var node = $('#tree').tree('getSelected');
	//		$('#tree').tree('expand', node.target);
	//	}

	function slide() {
		$.messager.show({
			title: 'tip',
			msg: 'nodes delete successful',
			timeout: 5000,
			showType: 'slide'
		});
	}
</script>
</body>
</html>